<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta content="telephone=no" name="format-detection" />
  <meta content="email=no" name="format-detection" />
  <title>Hello Vita</title>
</head>
<body>
  <!-- 这个UI由原生实现 -->
  <!-- <div class="mask" style="display: none;">
    <div class="dialog" >
      <div class="dialog-body">
        <div class="text">你已获得粉丝勋章<span class="date bold">2016-10-10</span></div>
      </div>
      <div class="dialog-footer">
        <div class="button btn-white">知道了</div>
        <div class="button btn-white bold">佩戴勋章</div>
      </div>
    </div>
  </div> -->
  <div class="page" id="open-page">
    <div class="base-info">
        <div class="group-name">
          娱+【543】文er小猪妖 的珍爱团
        </div>
        <div class="rank">NO.<br><span>99+</span></div>
        <div class="btn btn-default btn-renew">
          续费
        </div>
        <div class="tip" style="display: none;">
          <ul>
            <li>成员完成团任务可增加团积分</li>
            <li>每周周一0点至每周周日24点累计的团积分，将决定本周团等级</li>
          </ul> 
        </div>
          
        <div class="group-info">
          <div class="avatar"></div>
          <div class="right-info">
            <div class="base">
              <span class="name">小妖猪</span><span class="count">452136</span><span class="total">成员</span>
            </div>
            <div class="level">
              <div class="lv">LV9</div>
              <div class="progress-bar">
                <div class="text">2546/4665</div>
                <div class="progress"></div>
              </div>
              <div class="question"></div>
            </div>
          </div>
        </div>
    </div>
    <div id="not-member-page" style="display: none;">
      <div class="content">
        <p class="desc">开通珍爱团特权，享用铁粉特权</p>
        <div class="intros">
          <div class="swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slide"><img src="http://ued.yypm.com/702x180"></div>
              <div class="swiper-slide"><img src="http://ued.yypm.com/702x180"></div>
              <div class="swiper-slide"><img src="http://ued.yypm.com/702x180"></div>
            </div>
          </div>
        </div>
        <div class="prices">
          <div class="price" data-month="1">
            <div class="time">1个月</div>
            <div class="yprice">1Y币</div>
          </div>
          <div class="price" data-month="3">
            <div class="time">3个月</div>
            <div class="yprice">2.85Y币</div>
            <div class="discount">95折</div>
          </div>
          <div class="price" data-month="6">
            <div class="time">6个月</div>
            <div class="yprice">5.5Y币</div>
            <div class="discount">9折</div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 已开通 -->
    <div id="is-member-page" style="display: none;">
      <div class="content">
        <div class="head">
          <div class="text">
            我的积分<span class="text red">123456798</span>
            <span class="fan-rank-list">粉丝排行</span>
          </div>
        </div>
        <div class="body">
          <div class="task-list">
            <div id="task-login" class="task-item">
              <div class="icon login"></div>
              <div class="item-right">
                <p class="title">登录本直播间</p>
                <p class="desc">21354 铁粉已完成</p>
              </div>
              <div class="point login">
                <div class="tick"></div>
                <div class="text large">20积分</div>
                <div class="text small">周末双倍</div>
              </div>
            </div>
            <!-- 完成状态下 添加done样式即可 -->
            <div id="task-gift" class="task-item done">
              <div class="icon gift"></div>
              <div class="item-right">
                <p class="title">送礼物给主播</p>
                <p class="desc">21354 铁粉已完成</p>
              </div>
              <div class="point gift">
                <div class="tick"></div>
                <div class="text large">1积分</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
    
    <!-- 续费页 -->
    <div class="page" id="renew-page" style="display: none;">
      <div class="navigator" style="display:none;">
        <div class="back"></div>
        <div class="title">续费珍爱团</div>
      </div>
      <div class="content">
        <p class="desc">到期时间: <span class="red">2016-05-05</span></p>
        <div class="intros">
          <div class="swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slide"><img src="http://ued.yypm.com/702x180"></div>
              <div class="swiper-slide"><img src="http://ued.yypm.com/702x180"></div>
              <div class="swiper-slide"><img src="http://ued.yypm.com/702x180"></div>
            </div>
          </div>
        </div>
        <div class="prices">
          <div class="price" data-month="1">
            <div class="time">1个月</div>
            <div class="yprice">1Y币</div>
          </div>
          <div class="price" data-month="3">
            <div class="time">3个月</div>
            <div class="yprice">2.85Y币</div>
            <div class="discount">95折</div>
          </div>
          <div class="price" data-month="6">
            <div class="time">6个月</div>
            <div class="yprice">5.5Y币</div>
            <div class="discount">9折</div>
          </div>
        </div>
      </div>
    </div>
    <script type="text/javascript" src="http://earn.yystatic.com/earn/js/??jquery/jquery.min.js,jquery/jquery.url.min.js,jquery/jquery.cookie.min.js,login/login.js,mobile/yym-requirejs.js,mobile/YYMobileBridge.js,mobile/WAJavascriptBridge.js,cherish/yymobile_api_v1.2.12.js,mobile/mPublic_v1.0.1.js,uiwidget/uiwidget-messagebox2.min.js,uiwidget/uiwidget-include.min.js,mNoble/error_code.js?v=2015080303,cherish/zepto.min.js,cherish/mobilehiido.js?v=33"></script>
</body>
</html>